<template>
  <div v-show="curComp.config.isShow" :style="{ position: 'absolute',backgroundSize: '100% 100%', ...previewDynamicCompStyle }">
    <Suspense>
      <template #default>
        <component
          v-if="curComp.temp"
          :is="curComp.temp"
          :class="[`${animationsClass(curComp.style?.animate?.classNames || [])}`, { 'animate__infinite': curComp.style?.animate?.isInfinite || false }]"
          :curComp="curComp"
        ></component>
      </template>
      <template #fallback>
        <LoadingComp
          :compId="curComp.id"
          :model="MODEL_TYPES.Circular"
          :height="curComp.grid.height"
          :delay="0"
          bgColor="rgba(0,0,0,0)"
        />
      </template>
    </Suspense>
  </div>
</template>
<script setup lang="ts">
import { animationsClass } from '@/utils'
import { computed } from 'vue'
import LoadingComp from '@/components/Loading/index.vue'
import { MODEL_TYPES } from 'web-loading'
import { JSONParse, JSONStringify } from 'wft-utils'

const props = defineProps<{
  curComp: TComp
}>()

const previewDynamicCompStyle = computed(() => {
  const s: {[PropName: string]: any} = {}
  const panelStyle = JSONParse(JSONStringify(props.curComp.style.panelStyle))
  s.backgroundColor = panelStyle.backgroundColor
  s.backgroundImage = `url(${panelStyle.backgroundImage})`
  if(panelStyle.border.show) {
    s.border = `${panelStyle.border.borderWidth}px ${panelStyle.border.borderType} ${panelStyle.border.borderColor}`
    s.borderRadius = `${panelStyle.border.borderRadius}px`
  }
  return {
    top: props.curComp.resizeGrid.top,
    left: props.curComp.resizeGrid.left,
    width: props.curComp.resizeGrid.width,
    height: props.curComp.resizeGrid.height,
    ...s
  }
})
</script>